import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './info.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import FormSelect from '@/pages/common/form-select';
import {_, WMkit, wxAuth} from 'wmkit';
import api from 'api';
import {debounce, throttle} from 'lodash';
import {cache} from 'config';
import {AtCurtain} from 'taro-ui';
import 'taro-ui/dist/style/components/curtain.scss';
import jiLuImg from '@/assets/image/balance/jiLu.png';
import mingXiImg from '@/assets/image/balance/mingXi.png';
import balanceImg from '@/assets/image/balance/my-balance.png';

type IInfoProps = T.IProps & T.IInfoProps;
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class Info extends Component<Partial<IInfoProps>, T.IInfoState> {
  constructor(props: IInfoProps) {
    super(props);
    this.state = {
      isOpened: false,
    };
  }

  handleChange() {
    this.setState({
      isOpened: true,
    });
  }

  onClose() {
    this.setState({
      isOpened: false,
    });
  }

  render() {
    let {
      main,
      actions: {action},
    } = this.props;
    return (
      <View className="home_detail">
        <View className="balance_info">
          <View>
            <Image className="myBalance" src={balanceImg} mode="heightFix" />
          </View>
          <View className="info_box">
            <View className="info_box_top">
              <View>
                <Text className="info_box_1">当前余额（元）</Text>
                <Text className="info_box_2">
                  {main?.amount?.accountBalanceTotal ? main?.amount?.accountBalanceTotal.toFixed(2) : '0.00'}
                </Text>
              </View>
              <View
                className="deposit-btn"
                onClick={() => {
                  Taro.navigateTo({
                    url: `/pages/package-A/customer/balance/deposit/index`,
                  });
                }}
              >
                <Text className="btn_text">提现</Text>
              </View>
            </View>

            <View className="info_box_bottom">
              <View className="info_box_bottom_">
                <Text className="info_box_3">待入账余额（元）</Text>
                <Text className="info_box_4">{_.addZero(main?.amount?.blockedBalanceTotal)}</Text>
              </View>
              <View className="info_box_bottom_">
                <Text className="info_box_3">已提现余额（元）</Text>
                <Text className="info_box_4">{_.addZero(main?.amount?.alreadyDrawAmount)}</Text>
              </View>
            </View>
          </View>
        </View>

        <View className="info_box2">
          <Image className="imgs" src={mingXiImg} />
          <View style={{flex: 1}}>
            <FormSelect
              labelName="账户明细"
              placeholder=""
              leftStyle={{fontSize: '32rpx', color: '#333333'}}
              onClick={() => {
                Taro.navigateTo({url: `/pages/package-A/customer/balance/account-detail/index`});
              }}
              iconVisible
            />
          </View>
        </View>

        <View className="info_box2">
          <Image className="imgs" src={jiLuImg} />
          <View style={{flex: 1}}>
            <FormSelect
              labelName="提现记录"
              placeholder=""
              leftStyle={{fontSize: '32rpx', color: '#333333'}}
              onClick={async () => {
                await Taro.navigateTo({url: `/pages/package-A/customer/balance/deposit/deposit-records/index`});
              }}
              iconVisible
            />
          </View>
        </View>
        <View
          className="bottom"
          onClick={() => {
            this.handleChange();
          }}
        >
          <Text className="tips">提现须知</Text>
        </View>

        <AtCurtain isOpened={this.state.isOpened} onClose={this.onClose.bind(this)}>
          <View
            onClick={(e) => {
              e.stopPropagation();
              this.setState({
                isOpened: false,
              });
            }}
          >
            <Image className="modelIcon" src="https://ruiyinmall.oss-cn-nanjing.aliyuncs.com/ruizhimini/model.png" />
          </View>
        </AtCurtain>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
